<script setup lang="ts">
import sysDictApi from "./api/SysDictApi.ts";
import type DictSelectProp from "@/view/dict/type/DictSelectProp.ts";
import {computed, onMounted, ref} from "vue";
import type SelectItem from "@/components/select/type/SelectItem.ts";

const $emit = defineEmits(['update:modelValue'])
const $prop = defineProps<DictSelectProp>()

const dictItems = ref<SelectItem[]>([])

const dictCode = computed(() => $prop.dictCode)
const listDictItem = async () => {
  const items = await sysDictApi.listDictItem({dictCode: dictCode.value})
  dictItems.value = items.map(item => {
    const selectItem: SelectItem = {
      value: item.dictItemValue,
      label: item.dictItemText
    }
    return selectItem
  })
  console.log(dictItems.value)
}


onMounted(() => {
  listDictItem()
})

</script>

<template>
  <t-select :modelValue="$prop.modelValue" @update:modelValue="(newValue:any) => $emit('update:modelValue', newValue)"
            :options="dictItems" :label="label" :labelWidth="labelWidth"
            :borderColor="borderColor" :required="required" :multiple="multiple"
            :placeholder="placeholder" :searchable="searchable"/>
</template>

<style scoped>

</style>